<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>自定义表格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
<script src="${base}/js/plugins/layer/layer.min.js"></script>
	<style>
 select:focus option:checked{
 color: white;
 background-image:linear-gradient(#fada00, #fada00);}
} 

/*  select{margin-top: 1px;background: none;} */
        

/*
		option:checked, option:hover {
		    color: white;
		    background:url("");
		}
*/
//用一个1px X 1px 的图片颜色


	
	</style>
<script>
		$(function(){
			$("#templateName").blur(function(){
				var tableName = $(this).val();
				
				if(tableName != ""){
					$.post("${ pageContext.request.contextPath }/table/checkTableName",{"tableName":tableName},function(data){
		 				if(data == 1){
		 					$("#s1").html("<font color='green'>该模板名可以使用</font>");
		 					$("#saveTemplate").attr("disabled",false);
		 				}else if(data == 2){
		 					$("#s1").html("<font color='red'>该模板名已经存在</font>");
		 					$("#saveTemplate").attr("disabled",true);
	 	 				}
	 	 			});
	 			}else{
	 				$("#s1").html("<font color='red'>模板名不能为空</font>");
	 				$("#saveTemplate").attr("disabled",true);
	 			}
	 		});
			
			$("#saveTemplate").mouseover(function(){
				
				if($("#templateName").val() == ""){
					$("#saveTemplate").attr("disabled",true);
					alert("请填写模板名称");
				}
			});
	 		
	 	});
			
</script>
</head>

<body>
	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>
		<div style="margin-left: 20px;margin-bottom: 10px; color: grey">当前位置：模板管理 > 新建模板</div>
		
		<form id="allInput"   <%-- action="${ pageContext.request.contextPath }/tpl/createTemplate2?userId=${user.id}" --%>
			method="post">
			<div class="form-group">
				<div class="col-sm-4">
					<input type="text" class="form-control" id="templateName"
						name="templateName" placeholder="请输入模板名">
				</div>
				<span id="s1"></span>
					<br>
			</div>
			<div style="padding-top: 20px">
			<input type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" value="设置下拉框"> 
		    <!--  定义模态框触发器，此处为按钮触发  -->
			<!-- <a onclick="changey()"><input  type="button"
							class="btn btn-success" value="设置该列为下拉框"></a>
							<a onclick="tiaose()"><input  type="button"
							class="btn btn-success" value="请为该列下拉框配置颜色"></a> -->
					
			</div>
			
			<div class="container">
				<div style="overflow-x: scroll; width: 100%; white-space: nowrap;">
				
			
					
					<table class="table table-condensed table table-bordered"
						style="width: 100%; table-layout: fixed; margin-top: 50px; overflow: auto"
						align="center" id="table" border="1">
						<thead>
							<!-- alan_18.3.2_update_style -->
							<tr id="tr1" style="height: 30px;background-color:#87CEEB;" >
							<c:set var="a" value="1"></c:set>
							<c:forEach begin="1" end="6" step="1" >
								<th class="td" style="width: 120px; height: auto;"><input class="th_input"
									name="colName${a }" type="text " placeholder="请输入列名"
									style="border: none; height: 30px; font-size: 10px; width: 100%; background-color:#87CEEB; word-wrap: break-word;"></th>
								
								<c:set var="a" value="${a+1 }"></c:set>
								</c:forEach>
								
							</tr>
						</thead>
						<tbody>
					
						<c:forEach begin="1" end="4" step="1" varStatus="status">
						<c:if test="${status.index == 1 }">
						
						
							<tr id="tr2" style="height: 30px;">
							<c:set var="b" value="1"></c:set>
							<c:forEach begin="1" end="6" step="1" >
							
							
									<td class="colName${b}first"><input type="text" style="border: none; height: 35px; font-size: 10px; width: 100%; word-wrap: break-word;">
									<input type="hidden" name="colType${b }" value="0"/>
									<input type="hidden" name="defVal${b }" id="defVal${b }" value=""/>
									</td>
									 <c:set var="b" value="${b+1 }"></c:set>
							
								
								
								</c:forEach>
								</tr>
								</c:if>
								
								<c:if test="${status.index != 1 }">
										
						
						
							<tr id="tr2" style="height: 30px;">
							<c:set var="aa" value="1"></c:set>
							<c:forEach begin="1" end="6" step="1" varStatus="status">
							
							
							
								
								<td class="colName${aa}"><input type="text" style="border: none; height: 35px; font-size: 10px; width: 100%; word-wrap: break-word;">
								</td>
								 <c:set var="aa" value="${aa+1 }"></c:set>
								
								</c:forEach>
								</tr>
							
								
								
								 </c:if>
								</c:forEach>
								
							
						</tbody>
					</table>
				</div>
				<input  type="hidden"  id="totalNumber" name="totalNumber"  value="6"/>
				<p style="color: red;">注：请单击列名为该列配置列类型或者为该列下拉框各选项配置颜色</p>
				<!-- <button type="button" class="btn btn-primary"
				onclick="AddRow(document.getElementById('table'),1)">增加一行</button> -->
				<button type="button" class="btn btn-primary"
					onclick="addCell(id++)">增加一列</button>
				<input id="saveTemplate" type="button" onclick="allInfo()" class="btn btn-primary" value="保存模板">
				 
			</div>
		</form>
			<div class="container">
			  
   


    			<form method="post"  class="form-horizontal" role="form"
							id="myForm" action="#" >
							<div class="modal fade" id="myModal" role="dialog" tabindex=-1
								aria-labelledby="myModalLabel" aria-hidden="true">
								<!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
								<div class="modal-dialog" style="width: 500px">
									<!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
									<div class="modal-content">
										<!--  显示模态框白色背景，所有内容都写在这个div里面  -->

										<div class="btn-info modal-header">
											<!--  模态框标题  -->
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<!--  关闭按钮  -->
											<h4>设置下拉框</h4>
											<!--  标题内容  -->
										</div>

										<div class="modal-body">
											<!--  模态框内容，我在此处添加一个表单 -->
											<form class="form-horizontal" id="form2" role="form">
											<div id="setSelect">
												<div class="form-group">
					                                <label for="uname" class="col-sm-2 control-label">选项1</label>
					                                <div class="col-sm-5">
					                                    <input type="text" id="value1"  class="form-control well" placeholder="请输入..."/>
					                             </div>
					                            <span><input type="button" id="color1" onclick="tiaose1(this)" ></span>
					                            </div>
					                            <div class="form-group">
					                                <label for="upwd" class="col-sm-2 control-label">选项2</label>
					                                <div class="col-sm-5">
					                                    <input type="text" id="value2"  class="form-control well" placeholder="请输入..."/>
					                                </div>
					                                 <span><input type="button" id="color2" onclick="tiaose1(this)" ></span>
					                            </div>

												</div>
											</form>
											<div class="form-group">
					                                <label for="upwd" class="col-sm-3 control-label">增减选项</label>
					                               <div class="col-sm-8">
					                                    <input type="button" class="btn btn-primary" onclick="add(id)"
															style="width: 60px"  value="+"/>
					                                    <input type="button" class="btn btn-primary" onclick="deleteChild()"
															style="width: 60px"  value="-"/>
					                                </div>
					                            </div>
										</div>

										<div class="modal-footer">
											<!--  模态框底部样式，一般是提交或者确定按钮 -->
											<input type="button"   data-dismiss="modal"  class="btn btn-info" onclick="setSelect()"  value="确定">
											<button type="button" class="btn btn-default"
												data-dismiss="modal">取消</button>
										</div>

									</div>
									<!-- /.modal-content -->
								</div>
							</div>
							<!-- /.modal -->
						</form>
		</div>
	</div>
	
	
	
</body>
<script type="text/javascript">
		var toNumber = $("#totalNumber").val();
		var totalNumber = parseInt(toNumber);
		

		var el = window.document.body;//声明一个变量，默认值为body
		var colObj=null;
		window.document.body.onclick = function(event){
			
			
			  el = event.target;//鼠标每经过一个元素，就把该元素赋值给变量el
			
			  console.log('当前鼠标在', el, '元素上');//在控制台中打印该变量
			
			 if(event.target.className == "th_input"){
				colObj = event.target;
				
			} 
		}
		
		
		function allInfo(){
			
			
			$.ajax({  
		        type: "POST",  
		        url:"${ pageContext.request.contextPath }/tpl/createTemplate2?userId=${user.id}",  
		        data:$('#allInput').serialize(),// 序列化表单值  
		        dataType: "json",
		        success: function (data) {
		            
		            window.location.href="${ pageContext.request.contextPath }/tpl/template?templateId="+data;
				},
				async: true,
				cache: false
				}); 
			

			
		  }
		
		
		
		
		  var selector = 3;
		  function deleteChild() {
			  
			  $("#setSelect")[0].removeChild(document.getElementById("setSelect").lastChild);
			  selector = selector - 1;
		  }
		  function add(a) {
			  
				id = a + selector;
			
				$("#setSelect")
				
						.append(
								'<div class="form-group"><label for="select'+id+'" class="col-sm-2 control-label">选项'
										+ id
										+ '</label><div class="col-sm-5">'
										+ '<input type="text" id="value'+id+'"  class="form-control well" placeholder="请输入..."/>'
										+ '</div><span><input type="button" id="color'+id+'" onclick="tiaose1(this)" ></span></div>');
		  selector = selector + 1;
		  }
		  
		  
		  function tiaose1(obj){
				 
				
				data=obj;
				
			    layer.open({
			      type: 2,
			      title: '下拉框颜色选配',
			      maxmin: true,
			      shadeClose: true, //点击遮罩关闭层
			      area : ['600px' , '850px'],
			      content: 'http://127.0.0.1:8080/Excel/index-color.html'
			    
			    });
			 
		  }
		
		function setSelect(){
			
			
			var obj = $(colObj);
			
			
			var name = obj.attr("name");
			var number = $("#setSelect").children().length;
			var defVal = "";
			
			var a = [];
			for(var i = 1;i<=number;i++){
				a[i-1] = 	$("#value"+i).val();
				if(i<number){
				
				defVal += $("#value"+i).val()+$("#color"+i).attr("background-color")+"||";
				}else{
					defVal += $("#value"+i).val()+$("#color"+i).attr("background-color");	
				}
			}
				var defColor = $("#color1").attr("background-color");

			       $("."+name).html("");
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       var str1 = '<select  id="'+name+'" style="width: 100%; height: 30px;background-color:'+ defColor+'">';
			       var str2 = '<select  id="'+name+'" style="width: 100%; height: 30px;background-color:'+ defColor+'">';
			       
			       for(var j = 0;j<a.length;j++ ){
			    	   str1 += '<option  value="'+a[j]+'">'+a[j]+'</option>';
			    	   str2 += '<option  value="'+a[j]+'">'+a[j]+'</option>';
			       }
			       
			       str1 += '</select>';
			       str2 += '<input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/></select><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>';
			       $("."+name).append(str1);
			       $("."+name+"first").append(str2);
			       
			       /* $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+a[0]+'">'+a[0]+'</option><option value="'+a[1]+'">'+a[1]+'</option></select>');
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+a[0]+'">'+a[0]+'</option><option value="'+a[1]+'">'+a[1]+'</option><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/></select><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     */
			 $("#defVal"+num).val(defVal);
			     
			    
			     
			 $("#myForm").get(0).reset();
			
		  }


		function tiaose(){
			var name = $(el).attr("name");
			var ip="defVal"+(parseInt($(el).parent().index())+1);
			
			
			data=name+","+ip;
		    layer.open({
		      type: 2,
		      title: '下拉框颜色选配',
		      maxmin: true,
		      shadeClose: true, //点击遮罩关闭层
		      area : ['800px' , '820px'],
		      content: 'http://127.0.0.1:8082/Excel/index3333.html'
		    
		      /*  content: 'http://baidu.com' */
		    	 
		      
		    });
		  };
		
		  
		  
		function ceshi(){
	
			
 		var all = "";
			
			$("#abc option").each(function() {
			    all += $(this).attr("value")+"||";
			});
			 layer.open({
			      type: 1,
			      area: ['600px', '360px'],
			      shadeClose: true, //点击遮罩关闭
			      content: '\<\div style="padding:20px;">自定义内容\<\/div>'
			    }); 
		  };
		  
		 
		  
		function changey(){
			var name = $(el).attr("name");
			
			var num=prompt("请输入下拉框有几个值","2");  
			if(num == 2){
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");

			       $("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option></select>');
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/></select><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
			}else if(num == 3){
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");
				var val3=prompt("请输入下拉框第三个值","");
				$("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option></select><option value="'+val3+'">'+val3+'</option></select>');
			      var num =  name.substring(6,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option></select><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
				
			
			}else if(num == 4){
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");
				var val3=prompt("请输入下拉框第三个值","");
				var val4=prompt("请输入下拉框第四个值","");
				$("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option></select><option value="'+val3+'">'+val3+'</option><option value="'+val4+'">'+val4+'</option></select>');
			      var num =  name.substring(6,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option><option value="'+val4+'">'+val4+'</option></select><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
			}
			
		
		     
		     
		  };

	  
	  
	//需要设置一个隐藏input ，表示列数，每增加一列改变value
	function addCell(id) {
		var toNumber = $("#totalNumber").val();
		var totalNumber = parseInt(toNumber);
		
		id = id + 7;
		
		$("#tr1")
				.append(
						'<th style="width: 120px;height:auto; " class="td"><input name="colName'+id+'" type="text " placeholder="请输入列名" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>');

		
		$("#tr2")
				.append(
						'<td class="colName'+id+'"><input type="text" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>');
		
		
		$("#totalNumber").val(totalNumber+1);
		
	}
	function addRow() {
		var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		tbody.appendChild(tr);
		for (var i = 0; i < cells; i++) {
			var inputi = document.createElement('input');
			inputi.style.border = "none";
			inputi.style.height = "46px";
			inputi.style.font.size = "10px";
			var tdi = document.createElement('td');
			tdi.appendChild(inputi);
			tdi.className = "td";
			tdi.style.height = "46px";
			tdi.style.width = " 5%";
			tr.appendChild(tdi);
		}
	}

	
</script>
</html>


